class Snake {
    element:HTMLElement
    head:HTMLElement
    bodies:HTMLCollection

    constructor() {
        this.element = document.getElementById('snake')!
        this.head = document.querySelector('#snake>div') as HTMLElement
        this.bodies = this.element.getElementsByTagName('div')
    }

    get X(){
        return this.head.offsetLeft
    }

    get Y(){
        return this.head.offsetTop
    }

    set X(value:number){
        if(this.X === value){
            return
        }

        if (value<0 || value>290){
            throw new Error("撞墙了");     
        }
        if(this.bodies[1]&&(this.bodies[1] as HTMLElement).offsetLeft === value){
            if(value>this.X){
                value = this.X - 10
            }else{
                value = this.X + 10
            }
        }

        this.moveBody()
        this.head.style.left = value + 'px'     
        this.chenckheadbody()
    }

    set Y(value:number){
        if(this.Y === value){
            return
        }

        if (value<0 || value>290){
            throw new Error("撞墙了");     
        }
        if(this.bodies[1]&&(this.bodies[1] as HTMLElement).offsetTop === value){
            if(value>this.Y){
                value = this.Y - 10
            }else{
                value = this.Y + 10
            }
        }

        this.moveBody()
        this.head.style.top = value + 'px'  
        this.chenckheadbody()
    }

    addBody(){
        this.element.insertAdjacentHTML('beforeend',"<div></div>")
    }

    moveBody(){
        for (let i = this.bodies.length-1; i>0; i--) {
            let X = (this.bodies[i-1] as HTMLElement).offsetLeft;
            let Y = (this.bodies[i-1] as HTMLElement).offsetTop;
            
            (this.bodies[i] as HTMLElement).style.left = X + 'px';
            (this.bodies[i] as HTMLElement).style.top = Y + 'px';
        }
    }
    chenckheadbody(){
        for (let index = this.bodies.length - 1; index > 0 ; index--) {
            let lt = (this.bodies[index] as HTMLElement)
            if(this.head.offsetLeft === lt.offsetLeft && this.head.offsetTop === lt.offsetTop){
                throw new Error("撞到自己了");                
            }
        }
    }
}

export default Snake